<template>
    <div class="wf-modal">
        <van-popup v-model="show" position="center">
            <div class="body">
                <div v-if="title.length > 0" class="title">{{ title }}</div>
                <div class="content">{{ content }}</div>
                <div class="btn-group row">
                    <div class="btn btn-cancel" @click="onCancel">{{cancelText}}</div>
                    <div class="btn btn-confirm" @click="onConfirm">{{ confirmText }}</div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            title: "",
            content: "",
            confirm: null,
            cancel: null,
            showCancel: true,
            confirmText: "确认",
            cancelText: "取消"
        };
    },

    methods: {
        onClose() {
            this.show = false;
        },

        showModal(options) {
            const defaultFunc = () => {
                return true;
            };
            this.title = options.title || "";
            this.content = options.content || "";
            this.confirm = options.confirm || defaultFunc;
            this.cancel = options.cancel || defaultFunc;
            this.confirmText = options.confirmText || "确认";
            this.cancelText = options.cancelText || "取消";
            this.show = true;
        },

        onCancel() {
            this.show = false;
            this.cancel();
        },

        onConfirm() {
            this.show = false;
            this.confirm();
        }
    }
};
</script>


<style lang="less" scoped>
.wf-modal {
    .body {
        width: 600px;
        background: #fff;
        text-align: center;

        .title {
            padding: 20px 0;
            font-weight: 600;
            font-size: 36px;
        }

        .content {
            padding: 40px 30px;
            text-align: center;
            word-wrap: break-word;
        }

        .btn-group {
            border-top: 1px solid #eee;
            .btn {
                flex: 0 0 auto;
                width: 50%;
                padding: 30px 0;
            }

            .btn-confirm {
                color: #07c160;
            }
        }
    }
}
</style>